<!-- views/MasonryLayoutView.vue -->
<template>
  <div>
    <!-- 基础示例 -->
    <h2>基础示例</h2>
    <MasonryLayout
        :columns="2"
        :gutter="10"
        @layout-complete="handleLayoutComplete"
    >
      <div
          v-for="(item, index) in 20"
          :key="index"
          class="masonry-item"
          :style="{ height: `${Math.random() * 300 + 100}px`, background: randomColor() }"
      />
    </MasonryLayout>

    <!-- 响应式断点示例 -->
    <h2>响应式断点示例</h2>
    <MasonryLayout
        :columns="2"
        :breakpoints="{ 768: 3, 1024: 4 }"
        :gutter="15"
        :transition-duration="500"
    >
      <div
          v-for="(item, index) in images"
          :key="item.id"
          class="masonry-item"
      >
        <img :src="item.url" alt="">
      </div>
    </MasonryLayout>

    <!-- 动态内容示例 -->
    <h2>动态内容示例</h2>
    <button @click="addItems">添加元素</button>
    <MasonryLayout
        ref="masonry"
        :item-class="customItemClass"
        :resize-observer="false"
    >
      <div
          v-for="(item, index) in dynamicItems"
          :key="index"
          :class="customItemClass"
          :style="{ height: item.height }"
      />
    </MasonryLayout>
  </div>

</template>

<script setup>
import { ref } from 'vue'

// 示例数据
const randomColor = () => '#' + Math.floor(Math.random()*16777215).toString(16)

const images = ref([
  { id: 1, url: '/image1.jpg' },
  { id: 2, url: '/image2.jpg' },
  // ...
])

const dynamicItems = ref(Array(10).fill().map(() => ({
  height: `${Math.random() * 400 + 100}px`,
  color: randomColor()
})))

const customItemClass = 'custom-masonry-item'

const handleLayoutComplete = ({ columns, containerHeight }) => {
  console.log(`布局完成，列数：${columns}，容器高度：${containerHeight}px`)
}

const addItems = () => {
  dynamicItems.value.push({
    height: `${Math.random() * 400 + 100}px`,
    color: randomColor()
  })
  // 手动触发布局更新
  nextTick(() => {
    masonry.value.calculateLayout()
  })
}
</script>

<style>
.custom-masonry-item {
  width: 100%;
  background: #f0f0f0;
  border-radius: 8px;
  padding: 1rem;
  transition: transform 0.5s ease-in-out;
}
</style>